<template>
  <view class="detail" v-if="newInfo.content">
    <view class="title">{{ newInfo.title }}</view>
    <view class="user-info">
      <view style="width: 24px;height: 24px;margin-left: 4px;">
         <image class="user_avatar" :src="newInfo.avatar" @error="onImageError" />
      </view>
      <text class="user-name">{{ newInfo.username }}</text>
      <view class="time">
        <text style="margin: 0 6px;width:3px;height: 3px;border-radius: 100%;background-color: rgba(0, 0, 0, 0.4);display: inline-block;margin-bottom: 3px;"></text>
        <text>{{ dayjs.unix(newInfo.dateline).format('YYYY-MM-DD HH:mm:ss') }}</text>
      </view>
    </view> 
    <view class="content">
      <!-- {{ newInfo.message }} -->
       <up-parse :content="newInfo.content" :tagStyle="styleTag"></up-parse>
    </view>
    <view class="look">{{ newInfo.viewnum }}人浏览过</view>
    <!-- <up-sticky offset-top="500" style="width: 100%;" z-index="99999"> -->
        <view class="foot">
            <!-- 评论 -->
            <view class="info" @click="huifu" >
                <img src="/static/img/pinglun.png" class="img"/>
                <view class="font">{{newInfo.commentnum >999? '999+':newInfo.commentnum}}</view>
            </view>
            <!-- 点赞 -->
            <view :class="['info', {'fontdz':newInfo.isdz}]" style="margin-left: 16px;" @click="dzClick">
                <img :src="newInfo.isdz ? '/static/img/zanFull.png':'/static/img/zan.png'" class="img"/>
                <view class="font">{{newInfo.dznum  >999? '999+':newInfo.dznum }}</view>
            </view>
            <!-- 收藏 -->
            <view :class="['info', newInfo.isfav ? 'fontsc':'']" style="margin-left: 16px;" @click="scClick">
                <img :src="newInfo.isfav ? '/static/img/startFull.png' : '/static/img/star.png'" class="img"/>
                <view class="font">{{newInfo.favnum  >999? '999+':newInfo.favnum }}</view>
            </view>
            <!-- 分享 -->
            <view class="info" style="margin-left: 16px;background-color: #2A65FF;">
                <up-button class="share" customStyle="height:38px" color="#2A65FF" iconColor="#ffffff" shape="circle" icon="share" open-type="share" text="分享"></up-button>
            </view>
            <!-- shoucang thumb-up  #7F7F7F fontscEnd-->
            
        </view>
     <!-- </up-sticky> -->
    
    <view class="review" id="reviewScroll" ref="reviewScroll">
        <view class="reviewTitle">评论</view>
        <view class="reviewDom" v-if="!userInfo?.uid">
            <view class="anthor">
                <image src="/static/img/atvar.png" class="img"  />
            </view>
            <view class="info" @click="login">
                看完啦~诚邀<text class="loginText">&nbsp;登录&nbsp;</text>分享感受~
            </view>
        </view>
        <view v-else>
            <view class="reviewLogin">
                <view class="anthor">
                    <img :src="userInfo?.avatar" style="width:32px;height:32px;border-radius: 50%;" @error="onImageErrorAnthor" />
                </view>
                <view class="info">
                    
                    <up-textarea 
                      v-model="reviewText"
                      :focus="focusText"
                      placeholder="说说您的看法~"
                      @confirm="subClickReview"
                      class="textarea"
                      border="none"
                      ></up-textarea>
                </view>
            </view>
            <view style="margin-top:8px;width:88px;height: 32px;float: right;margin-right: 5px;" @click="subClick">
                <up-button color="#2A65FF" customStyle="padding:2px 15px;height: 32px;width: 88px;" text="发表评论"></up-button>
            </view>
        </view>
        <view class="reviewList" v-for="(item,index) in reviewInfoList" :key="index">
            <view class="anthor">
                <image :src="item.avatar" style="width:32px;height:32px;border-radius: 50%;" @error="onImageErrors(item)" />
                <view class="up-line-1 anthorName">{{ item.username  }}</view>
                <!-- <img src="/static/img/by.png" v-if="item.byname" style="width: 10px;height: 12px;margin:14px 0 0 10px;" /> -->
                <image src="/static/img/by.png" v-if="item.byname" style="width: 10px;height: 12px;margin-left:10px;" />
                <view class="up-line-1 anthorName" v-if="item.byname">{{ item.byname  }}</view>
            </view>
            <view class="info">
                <view class="text">{{item.message}}</view>
            </view>
            <view class="reviewInfo">
                <view class="left">
                    <view style="display: flex;" v-if="!item.isInfo">
                        <img src="/static/img/pinglun.png" @click="huifuClicks(index)" style="width:16px;height:16px;margin-top: 3px;" />
                        <view class="fontImg" @click="huifuClicks(index)" >回复</view>
                    </view>
                    <view style="display: flex;" v-else>
                        <img src="/static/img/reviewBlue.png" @click="cancleHuifu(index)" style="width:16px;height:16px;margin-top: 3px;" />
                        <view class="fontImg" style="color: #1A7FFE;" @click="cancleHuifu(index)" >取消回复</view>
                    </view>
                    <view>&emsp;&emsp;</view>
                    <up-icon @click="zanClick(item)" :name="item.isdzcount?'thumb-up-fill':'thumb-up'" :color="item.isdzcount?'#FF5959':'#000000'" size="20" style="display: inline;"></up-icon>
                    <view class="fontImg">{{item.dzcount}}</view>
                </view>
                <view class="right">
                    {{dayjs.unix(item.dateline).format('YYYY-MM-DD HH:mm:ss')}}
                </view>
            </view>
            <view v-if="item.isInfo" class="pinglunReview" style="margin-top:8px;width:calc(100%-50px);margin-left:40px;">
                  <view class="textarea">
                    <up-textarea v-model="handelReview"
                      placeholder="说说您的看法~"
                      @confirm="reviewClick(item)"
                      border="none"
                      style="padding:8px 2px;"	
                      ></up-textarea>
                  </view>
                  <view style="margin-top:8px;width:60px;float: right;margin-right: 5px;" @click="reviewClick(item)">
                     <up-button color="#2A65FF" customStyle="padding:2px 15px;height:32px;width:60px" text="回复"></up-button>
                  </view>  
            </view>
        </view>
    </view>
  </view>
  <my-action-sheet v-if="showActionSheetModel" ></my-action-sheet>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad,onShareAppMessage } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores'
import { getNewsDetailAPI, getThreadDetailAPI } from '@/api/news'
import { getArticleCommentAPI, addCanelFavAPI, addCanelLikesAPI, addCanelLikesByatAPI, getPostAPI, threadPostAPI, articleCommentAPI  } from '@/api/details'
import dayjs from 'dayjs'
const newInfo = ref<any>({})
const newsType = ref('1')
const showActionSheetModel = ref(false)
const focusText = ref(false)
const reviewScroll = ref(null)
const textLength = ref(0)
const styleTag = {
    p: 'font-weight: 400 !important;line-height: 24px !important;color: rgba(0, 0, 0, .8) !important;font-size: 16px !important;padding-top: 12px !important;margin: 0 !important;white-space: normal;word-wrap: break-word;overflow-wrap: break-word;word-break: break-all;',
    blockquote: 'font-weight: 400;border-left: 2px solid #2A65FF !important;background-color: #F6F6F6 !important;word-wrap: break-word;padding: 4px 1em;',
    strong: 'font-weight: 700',
    pre: 'background: #f5f2f0;padding: 1em;margin: .5em 0;overflow: auto;color: #000;text-shadow: 0 1px #fff;font-size: 1em;text-align: left;white-space: pre;word-spacing: normal;word-break: normal;word-wrap: normal;line-height: 1.5;',
  // img: 'width: 100% !important;height: auto !important;'

}
const optionItem = ref<any>()
const memberStore = useUserStore()
let userInfo = ref(memberStore.userInfo)
let uid = memberStore.userInfo?.uid
let anthor = memberStore.userInfo?.avatar
const reviewText = ref('')
const textId = ref('')
const byname = ref('')
//reviewInfo评论列表
const reviewInfoList = ref<any>([])
const handelReview = ref<any>('')
if (userInfo.value && !userInfo.value.nickName) {
  const srcMatch = userInfo.value.avatar.match(/<img.*?src=["'](.*?)["']/);
  if (srcMatch && srcMatch[1]) {
    userInfo.value.avatar = srcMatch[1]
  }
}
// 头像不能正常显示的时候显示默认图片
const onImageError = () => {
    // console.log('图片加载失败')
  newInfo.value.avatar = 'https://images-cloud.qboson.com/community/avatar/noavatar.svg'
}
// 文章列表报错时
const onImageErrors = (item:any) => {
    // console.log('图片加载失败')
  item.avatar = 'https://images-cloud.qboson.com/community/avatar/noavatar.svg'
}
//  actionSheet暂不登录操作按钮
uni.$on('closeActionSheet',function(){
  showActionSheetModel.value = false
//   memberStore.clearUserInfo()
//   uni.showTabBar({ animation: false })
})
//取消评论
const cancleHuifu = (index:any)=>{
    reviewInfoList.value[index].isInfo = false
}
// 获取文章列表
const getNewsDetail = async (tid: string) => {
  const params = {
    tid: tid
  }
  let res:any = {}
  if(newsType.value == '2'){
    res = await getThreadDetailAPI(params)
  }else{
    res = await getNewsDetailAPI(params)
  }
  
  let regx = /<div/g
  let regx2 = /<\/div/g
  res.content = res.content.replace(regx, "<view")
  res.content = res.content.replace(regx2, "</view")
  res.content = res.content.replace(/<pre>&nbsp;<\/pre>/g, '');
  newInfo.value = res;
//   console.log('文章->',res.content)
  
  const srcMatch = newInfo.value.avatar.match(/<img.*?src=["'](.*?)["']/);
  if (srcMatch && srcMatch[1]) {
    newInfo.value.avatar = srcMatch[1]
  }
  if (!res.content) {
    uni.showToast({
      title: '当前文章加载错误，请刷新文章列表重试',
      icon: 'none',
      duration: 2000
    })
  }
}
//分享文章
const shareClick = ()=>{
       console.log('22222')
        
}
//评论点赞
const zanClick= async(item:any)=>{
    console.log()
    let params:any = {
        aid:newsType.value == '2' ? item.tid:item.aid,
        commentid:item.cid,
    }
    params.liketype = newsType.value == '2' ? 'tid':'aid'
    const res = await addCanelLikesAPI(params)
    console.log('dzRes->pppp',res)
    if(!res.length){
        getArticle(textId.value)
    }
    // newInfo.value.isdz = !newInfo.value.isdz
}
//登录
const login = ()=>{
    showActionSheetModel.value = true
}
//分享
onShareAppMessage((res:any)=>{
    if (res.from == 'button') {// 来自页面内分享按钮
      console.log(res.target)
    }
    return {
      title: newInfo.value?.title,
      imageUrl:newInfo.value?.anthor,
      path: newsType.value=='2'?`/pagesA/index/detail?mod=viewthread&tid=${textId.value}`:`/pagesA/index/detail?mod=view&aid=${textId.value}`
    }
})
//获取评论
const getArticle = async(id:String)=>{
    let params:any = {
        tid:textId.value
    }
    let res:any = {}
    console.log('评论-》',newsType.value,textId.value)
    if(newsType.value == '2'){
        // params.tid = textId.value
        res = await getPostAPI(params)
    }else{
        // params.tid = textId.value
        // console.log('测试评论aid',params)
        res = await getArticleCommentAPI(params)
    }
    // reviewInfoList.value = res

    if(!res)return
    res.forEach((fatch:any)=>{
        res.isInfo = false
    })
    reviewInfoList.value = res   
    // const res = await getArticleCommentAPI(params)
    // console.log('测试评论',res)
}
//个人头像报错情况
const onImageErrorAnthor=()=>{
    console.log('anthor无效',anthor)
    userInfo.value.avatar = 'https://images-cloud.qboson.com/community/avatar/noavatar.svg'
    // userInfo.value.avatar=userInfo.value.avatar ? userInfo.value.avatar : 'https://images-cloud.qboson.com/community/avatar/noavatar.svg'
}
//文章点赞
const dzClick = async()=>{
    let params:any = {
        aid:textId.value,
        // commentid:textId.value,
    }
    params.liketype = newsType.value == '2' ? 'tid':'aid'
    const res = await addCanelLikesByatAPI(params)
    console.log('dzRes->',res)
    if(!res.length){
        newInfo.value.isdz = !newInfo.value.isdz
        getNewsDetail(textId.value)
    }
    // await addCanelLikesAPI()
}
//收藏
const scClick = async()=>{
    let params:any = {
        aid:textId.value,
    }
    params.liketype = newsType.value == '2' ? 'tid':'aid'
    const res = await addCanelFavAPI(params)
    console.log('scRes->',res)
    if(!res.length){
        newInfo.value.isfav = !newInfo.value.isfav
        getNewsDetail(textId.value)
    }
    
}   
//评论字段
const bindTextAreaBlur = (e:any)=>{
    console.log('评论-字段-》',e.detail.value)
    reviewText.value = e.detail.value
}
//发布评论
const subClick = async()=>{
    let params:any = {}
    params.message = reviewText.value?reviewText.value:handelReview.value;
    params.byname = byname.value ? byname.value : ''
    let res = {}
    if(!params.message) {
       uni.showToast({
            title: '评论为空无法提交',
            icon: 'none',
            duration: 2000
        })
        return
    }
    if(newsType.value == '2'){
        params.tid = textId.value
        res = await threadPostAPI(params)
        console.log('resTid->',res)
        if(res){
            reviewText.value = ''
            handelReview.value = ''
            byname.value = ''
            getArticle(textId.value)
            getNewsDetail(textId.value)
        }
    }else{
        params.aid = textId.value
        reviewText.value = ''
        byname.value = ''
        handelReview.value = ''
        res = await articleCommentAPI(params)
        console.log('resAid->',res)
        if(res){
            getArticle(textId.value)
            getNewsDetail(textId.value)
        }
    }
}
    //回复
    const huifu = ()=>{
        console.log('回复')
        const reviewScrolls = reviewScroll.value
        byname.value = ''
        // 获取手机系统相关的信息，是为了获取导航条和状态栏高度。
        let res = uni.getSystemInfoSync();
  
        // 获取需要定位的元素的坐标位置
        uni.createSelectorQuery().select('.review').boundingClientRect(data => {
            // 此处的定时器，非常的重要，等待页面渲染完，然后滚动页面。
            // 需要除去 标题栏高度 和 状态栏高度
            // console.log('data->', data)
            
            
            // console.log('res->',scrollLength)
            if(!textLength.value) {
            
                textLength.value = data.top - res.screenTop - res.statusBarHeight
            }
            // let ls = 7801.84375
            setTimeout(()=>{
                uni.pageScrollTo({
                    scrollTop: textLength.value
                })
            }, 300)
        }).exec();
      
    }
    //文章评论提交
    const subClickReview = ()=>{
       subClick()
    }
    //评论评论提交
    const reviewClick = (item:any)=>{
       console.log('reInfo',item)
       byname.value = item.username
       subClick()
       reviewInfoList.value.forEach((item:any)=>{
            item.isInfo =  false     
       })

    }
    //评论评论
    const huifuClicks=(index:any)=>{
       console.log('index->',userInfo.value)
       if(!userInfo.value?.uid){
          uni.showToast({
                title: '请先登录',
                icon:'none',
                duration: 2000
            })
          return      
       }
       reviewInfoList.value.forEach((item:any)=>{
            item.isInfo =  false     
       })
       reviewInfoList.value[index].isInfo = true
    }
//登录成功刷新页面\
uni.$on("loginSuccess", function(info:any) {
    
     userInfo.value = info
    if(userInfo.value && userInfo.value.avatar){
        const srcMatch = userInfo.value.avatar.match(/<img.*?src=["'](.*?)["']/);
        console.log('srcMatch->',srcMatch)
        if (srcMatch && srcMatch[1]) {
            userInfo.value.avatar = srcMatch[1]
        }
        console.log('登录成功',userInfo.value)
        getNewsDetail(textId.value)
        getArticle(textId.value)
    }
    // console.log('变量值',uid,anthor)
    // uid.value = userInfo.value.uid
    // anthor.value = userInfo.value.avatar
    
});
onLoad((option:any) => {
    // console.log('uid->',uid)
    // console.log('io->',option)
    newsType.value  = option.mod=='viewthread' ? '2' : '1'
    textId.value = option.mod == 'viewthread'? option.tid : option.aid
    const id = option.mod == 'viewthread'? option.tid : option.aid
    optionItem.value = option
    // showActionSheetModel.value = uid.value ? false:true
    getNewsDetail(id)
    getArticle(id)
})
</script>
<style lang="scss">
.detail {
//   width: 90%;
  margin: auto;
//   margin-top: 16px;
  margin:16px 20px 0 20px;
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .title {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 0px;
    font-variation-settings: "opsz" auto;
    /* base/font/gy1 */
    color: rgba(0, 0, 0, 0.9);
  }
  .user-info {
    display: flex;
    align-items: center;
    font-size: 12px;
    margin: 12px 0 16px 0;
    .user_avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
    }
    .user-name {
      line-height: 20px;
      letter-spacing: 0px;
      /* base/font/gy1 */
      color: rgba(0, 0, 0, 0.9);
      margin-left: 4px;
    }
    .time {
      line-height: 20px;
      letter-spacing: 0px;
      /* base/font/gy3 */
      color: rgba(0, 0, 0, 0.4);
    }
  }
  .content {
    width: 100%;
  }
  .look {
    font-size: 13px;
    line-height: 21px;
    letter-spacing: 0px;
    /* base/font/gy3 */
    color: rgba(0, 0, 0, 0.4);
    margin-top: 16px;
  }
  .foot{
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    position:sticky;
    background-color: #FFFFFF;
    // height: 68px;
    padding-top:16px;
    padding-bottom: 28px;
    bottom:0;
    // padding:16px 20px 28px 20px;
    // margin-top: 16px;
    .info{
        // width: 74.75px;
        flex:1;
        height: 38px;
        // margin-left: 1%;
        // margin-left: 8px;
        border-radius: 175px;
        opacity: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        text-align: center;
        background: #F6F6F6;
        // line-height: 38px;
        .img{
            // display: inline;
            // margin: auto;
            margin-top: 8px;
            // margin-left:10px;
            width:20px;
            height:20px
        }
        .font{
            margin-left: 5px;
            font-family: PingFang SC;
            font-size: 14px;
            font-weight: normal;
            line-height: 38px;
            text-align: center;
            letter-spacing: 0px;
            color: rgba(0, 0, 0, 0.4);
        }
    }
    .fontdz{
        background: #FFEEEE;
        box-sizing: border-box;
        border: 1px solid #FFB8B8;
        .font{
            color: #FF5959;
        }
    }
    .fontsc{
        background: #FEF8E9;
        box-sizing: border-box;
        border: 1px solid #F7BA1E;
        .font{
            color: #F7BA1E;
        }
    }
  }
  .review{
     margin-top:30px ;
     width:100%;
    //  padding: 0px 20px;
     .reviewTitle{
        font-family: PingFang SC;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: 0px;
        font-variation-settings: "opsz" auto;
        /* base/font/gy1 */
        color: rgba(0, 0, 0, 0.9);
     }
     .reviewLogin{
        display: flex;
        // width:100%;
        // margin:0;
        margin-top: 15px;
        // margin-left: 10px;
        flex-direction: row;
        .anthor{
            // width: 40px;
            // height: 40px;
            padding:4px 0 4px 0;
            // background-color: yellowgreen;
        }
        .info{
            width:calc(100% - 54px);
            // background-color: red;
            // height: 80px;
            margin-left: 16px;
            // text-align: center;
            // padding-left: 20px;
            // font-family: PingFang SC;
            // font-size: 16px;
            // font-weight: normal;
            // line-height: 40px;
            // // border: 1px solid #DEDEDE;
            // letter-spacing: 0px;
            // /deep/.u-textarea{
              border:1px solid #DEDEDE;
            // }
            .textarea{
                border:1px solid #000;
                padding:2px 8px;    
            }
        }
     }
     .reviewDom{
        display: flex;
        margin-top: 15px;
        flex-direction: row;
        .anthor{
            width: 30px;
            height: 30px;
            padding: 4px 0;
            .img{
              width: 30px;
              height: 30px;
              border-radius: 100%;
            }
            // background-color: yellowgreen;
        }
        .info{
            width:calc(100% - 40px);
            height: 40px;
            margin-left: 10px;
            // text-align: center;
            padding-left: 20px;
            font-family: PingFang SC;
            font-size: 16px;
            font-weight: normal;
            line-height: 40px;
            letter-spacing: 0px;
            .loginText{
                display: inline;
                font-family: PingFang SC;
                font-size: 16px;
                font-weight: normal;
                line-height: 24px;
                letter-spacing: 0px;
                text-decoration: underline;

                /* color/info/normal */
                color: #1A7FFE; 
            }
            /* base/font/gy3 */
            color: rgba(0, 0, 0, 0.4);

            background-color: #F6F6F6;
        }
     }
     .reviewList{
        padding: 10px 0px;
        .anthor{
            width: 100%;
            height: 36px;
            padding: 2px;
            display: flex;
            flex-direction: row;
            align-items: center;
            // background-color: #f4f4f4;
            .anthorName{
                max-width: 150px;
                overflow:hidden;
                height:24px;
                line-height: 24px;
                // display: -webkit-box;
                // white-space: nowrap; /* 强制文本在一行内显示 */
                // -webkit-box-orient: vertical;
		        // -webkit-line-clamp: 1;
                // overflow: hidden; /* 隐藏超出容器的文本 */
                // text-overflow: ellipsis; /* 用省略号表示被截断的文本 */
                margin-left: 8px;
                // margin-top: 8px;
                font-family: PingFang SC;
                font-size: 16px;
                font-weight: normal;
                letter-spacing: 0px;

                /* base/font/gy1 */
                color: rgba(0, 0, 0, 0.9);

            }
        }
        .info{
            margin-left: 43px;
            // width: 272px;
            // height: 52px;
            // background-color: #f4f4f4;
            font-family: PingFang SC;
            font-size: 15px;
            font-weight: normal;
            line-height: 22px;
            letter-spacing: 0px;
            
            /* base/font/gy2 */
            color: rgba(0, 0, 0, 0.6);

        }
        .reviewInfo{
            height: 21px;
            margin-left: 43px;
            margin-top: 8px;
            // width: 272px;
            // height: 52px;
            // background-color: #f4f4f4;
            font-family: PingFang SC;
            font-size: 15px;
            font-weight: normal;
            line-height: 22px;
            letter-spacing: 0px;
            display: flex;
            flex-direction: row;
            /* base/font/gy2 */
            color: rgba(0, 0, 0, 0.6);
            .left{
                width: 49%;
                height: 21px;
                display: flex;
                flex-direction: row;
                // background-color: aquamarine;
                .fontImg{
                    font-family: PingFang SC;
                    margin-left: 4px;
                    font-size: 13px;
                    font-weight: normal;
                    line-height: 21px;
                    letter-spacing: 0px;

                    /* base/font/gy3 */
                    color: rgba(0, 0, 0, 0.4);
                }
            }
            .right{
                width: 49%;
                height: 21px;
                text-align: right;
                font-size: 13px;
                font-weight: normal;
                line-height: 21px;
                letter-spacing: 0px;

                /* base/font/gy3 */
                color: rgba(0, 0, 0, 0.4);
                // background-color: rosybrown;
            }
        }
        .pinglunReview{
           .textarea{
              width:100%;
            //   margin-left:40px;
              border:1px solid #DEDEDE;
           }
        } 
     }
   }
}
</style>
